<template>
<div>
  <header>
    <van-nav-bar
      title="新建地址信息"
      left-arrow
      @click-left="onClickLeft"
    />
  </header>
  <van-address-edit
    :area-list='areaList'
    show-postal
    show-delete
    show-set-default
    show-search-result
    :search-result="searchResult"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
    @change-detail="onChangeDetail"
  />
</div>
  
</template>
<script>
import Vue from 'vue';
import { AddressEdit } from 'vant';
import { NavBar } from 'vant';

Vue.use(NavBar);
Vue.use(AddressEdit);
export default {
   data() {
    return {
      areaList:{
         province_list: {
            110000: '北京市',
            120000: '天津市',
         },
          city_list: {
            110100: '北京市',
            120100: '天津市',
          },
          county_list: {
              110101: '东城区',
              110102: '西城区',
              110105: '朝阳区',
              110106: '丰台区',
              110107: '石景山区',
              110108: '海淀区',
              110109: '门头沟区',
              110111: '房山区',
              110112: '通州区',
              110113: '顺义区',
              110114: '昌平区',
              110115: '大兴区',
              110116: '怀柔区',
              110117: '平谷区',
              110118: '密云区',
              110119: '延庆区',
              120101: '和平区',
              120102: '河东区',
              120103: '河西区',
              120104: '南开区',
              120105: '河北区',
              120106: '红桥区',
          }
      },
      searchResult: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSave() {
      console.log('save');
      this.$router.back();
    },
    onDelete() {
      this.$router.back();
      console.log('delete');
    },
    onChangeDetail(val) {
      // if (val) {
      //   this.searchResult = [
      //     {
      //       name: '黄龙万科中心',
      //       address: '杭州市西湖区',
      //     },
      //   ];
      // } else {
      //   this.searchResult = [];
      // }
    },
  },
}
</script>
<style lang="stylus" scoped>

</style>